const nodeType = {
  switch: "\ue67a",
  router: "\ue834",
  firewall: "\ue82f",
  host: "\ue83b",
  store: "\ue82f",
  vm: "\ue838",
  default: "\ue835",
};

import {
  lightColors,
  darkColors,
  uLightColors,
  uDarkColors,
} from "./colors.js";

import { axiosPostRequst, axiosGetRequst } from "../utils/request.js";

// 隐藏图表
$(".layui-form").hide();

// 获取拓扑关系
// var { data } = await axiosGetRequst("/m3");
var data = {
  nodes: [
    {
      id: "10.183.242.133",
      label: "10.183.242.133",
      type: "vm",
    },
    {
      id: "10.183.235.24",
      label: "10.183.235.24",
      type: "host",
    },
    {
      id: "LK-A2-403-SG-MG-ISCSI",
      label: "LK-A2-403-SG-MG-ISCSI",
      type: "store",
    },
    {
      id: "10.183.242.134",
      label: "10.183.242.134",
      type: "vm",
    },
    {
      id: "10.183.235.25",
      label: "10.183.235.25",
      type: "host",
    },
    {
      id: "10.183.242.135",
      label: "10.183.242.135",
      type: "vm",
    },
    {
      id: "10.183.235.26",
      label: "10.183.235.26",
      type: "host",
    },
    {
      id: "10.183.242.136",
      label: "10.183.242.136",
      type: "vm",
    },
    {
      id: "10.183.235.22",
      label: "10.183.235.22",
      type: "host",
    },
    {
      id: "10.183.242.137",
      label: "10.183.242.137",
      type: "vm",
    },
    {
      id: "10.183.235.28",
      label: "10.183.235.28",
      type: "host",
    },
    {
      id: "10.183.242.138",
      label: "10.183.242.138",
      type: "vm",
    },
    {
      id: "10.183.235.29",
      label: "10.183.235.29",
      type: "host",
    },
    {
      id: "10.183.242.139",
      label: "10.183.242.139",
      type: "vm",
    },
    {
      id: "10.183.235.30",
      label: "10.183.235.30",
      type: "host",
    },
    {
      id: "10.183.242.140",
      label: "10.183.242.140",
      type: "vm",
    },
    {
      id: "10.183.235.31",
      label: "10.183.235.31",
      type: "host",
    },
    {
      id: "10.183.242.141",
      label: "10.183.242.141",
      type: "vm",
    },
    {
      id: "10.183.235.32",
      label: "10.183.235.32",
      type: "host",
    },
    {
      id: "10.183.242.142",
      label: "10.183.242.142",
      type: "vm",
    },
    {
      id: "10.183.235.33",
      label: "10.183.235.33",
      type: "host",
    },
    {
      id: "10.183.242.143",
      label: "10.183.242.143",
      type: "vm",
    },
    {
      id: "10.183.235.34",
      label: "10.183.235.34",
      type: "host",
    },
    {
      id: "10.183.242.144",
      label: "10.183.242.144",
      type: "vm",
    },
    {
      id: "10.183.235.35",
      label: "10.183.235.35",
      type: "host",
    },
    {
      id: "10.183.242.145",
      label: "10.183.242.145",
      type: "vm",
    },
    {
      id: "10.183.235.36",
      label: "10.183.235.36",
      type: "host",
    },
    {
      id: "10.183.242.146",
      label: "10.183.242.146",
      type: "vm",
    },
    {
      id: "10.183.235.37",
      label: "10.183.235.37",
      type: "host",
    },
    {
      id: "10.183.242.147",
      label: "10.183.242.147",
      type: "vm",
    },
    {
      id: "10.183.235.38",
      label: "10.183.235.38",
      type: "host",
    },
    {
      id: "10.183.242.148",
      label: "10.183.242.148",
      type: "vm",
    },
    {
      id: "101.183.242.148",
      label: "101.183.242.148",
      type: "vm",
    },
    {
      id: "102.183.242.148",
      label: "102.183.242.148",
      type: "vm",
    },
    {
      id: "10.183.235.39",
      label: "10.183.235.39",
      type: "host",
    },
    {
      id: "10.183.242.149",
      label: "10.183.242.149",
      type: "vm",
    },
    {
      id: "10.183.235.40",
      label: "10.183.235.40",
      type: "host",
    },
    {
      id: "10.183.242.150",
      label: "10.183.242.150",
      type: "vm",
    },
    {
      id: "10.183.235.23",
      label: "10.183.235.23",
      type: "host",
    },
    {
      id: "10.183.250.10",
      label: "10.183.250.10",
      type: "physical",
    },
  ],
  edges: [
    {
      target: "10.183.242.133",
      source: "10.183.235.24",
    },
    {
      target: "LK-A2-403-SG-MG-ISCSI",
      source: "10.183.235.24",
    },
    {
      target: "10.183.242.134",
      source: "10.183.235.25",
    },
    {
      target: "LK-A2-403-SG-MG-ISCSI",
      source: "10.183.235.25",
    },
    {
      target: "10.183.242.135",
      source: "10.183.235.26",
    },
    {
      target: "LK-A2-403-SG-MG-ISCSI",
      source: "10.183.235.26",
    },
    {
      target: "10.183.242.136",
      source: "10.183.235.22",
    },
    {
      target: "LK-A2-403-SG-MG-ISCSI",
      source: "10.183.235.22",
    },
    {
      target: "10.183.242.137",
      source: "10.183.235.28",
    },
    {
      target: "LK-A2-403-SG-MG-ISCSI",
      source: "10.183.235.28",
    },
    {
      target: "10.183.242.138",
      source: "10.183.235.29",
    },
    {
      target: "LK-A2-403-SG-MG-ISCSI",
      source: "10.183.235.29",
    },
    {
      target: "10.183.242.139",
      source: "10.183.235.30",
    },
    {
      target: "LK-A2-403-SG-MG-ISCSI",
      source: "10.183.235.30",
    },
    {
      target: "10.183.242.140",
      source: "10.183.235.31",
    },
    {
      target: "LK-A2-403-SG-MG-ISCSI",
      source: "10.183.235.31",
    },
    {
      target: "10.183.242.141",
      source: "10.183.235.32",
    },
    {
      target: "LK-A2-403-SG-MG-ISCSI",
      source: "10.183.235.32",
    },
    {
      target: "10.183.242.142",
      source: "10.183.235.33",
    },
    {
      target: "LK-A2-403-SG-MG-ISCSI",
      source: "10.183.235.33",
    },
    {
      target: "10.183.242.143",
      source: "10.183.235.34",
    },
    {
      target: "LK-A2-403-SG-MG-ISCSI",
      source: "10.183.235.34",
    },
    {
      target: "10.183.242.144",
      source: "10.183.235.35",
    },
    {
      target: "LK-A2-403-SG-MG-ISCSI",
      source: "10.183.235.35",
    },
    {
      target: "10.183.242.145",
      source: "10.183.235.36",
    },
    {
      target: "LK-A2-403-SG-MG-ISCSI",
      source: "10.183.235.36",
    },
    {
      target: "10.183.242.146",
      source: "10.183.235.37",
    },
    {
      target: "LK-A2-403-SG-MG-ISCSI",
      source: "10.183.235.37",
    },
    {
      target: "10.183.242.147",
      source: "10.183.235.38",
    },
    {
      target: "LK-A2-403-SG-MG-ISCSI",
      source: "10.183.235.38",
    },
    {
      target: "10.183.242.148",
      source: "10.183.235.39",
    },
    {
      target: "LK-A2-403-SG-MG-ISCSI",
      source: "10.183.235.39",
    },
    {
      target: "10.183.242.149",
      source: "10.183.235.40",
    },
    {
      target: "LK-A2-403-SG-MG-ISCSI",
      source: "10.183.235.40",
    },
    {
      target: "10.183.242.150",
      source: "10.183.235.23",
    },
    {
      target: "LK-A2-403-SG-MG-ISCSI",
      source: "10.183.235.23",
    },
    {
      target: "10.183.250.10",
      source: "10.183.235.40",
    },
    {
      target: "101.183.242.148",
      source: "10.183.242.148",
    },
    {
      target: "102.183.242.148",
      source: "10.183.242.148",
    },
  ],
};
let nodeArr = data.nodes;
let edgeArr = data.edges;

let testData = {
  nodes: [],
  edges: [],
};

// 处理节点
testData.nodes = [...nodeArr];

// 处理连线
testData.edges = edgeArr;

/* ============================================================ */
let showNodes = [];
let showEdges = [];

let nodes = [];
let edges = [];
let nodeMap = new Map();
let edgesMap = new Map();

var graphDiv = $("#topoGrapth");
const width = graphDiv.width();
const height = graphDiv.height() || 500;

//主题颜色处理
const gColors = [];
const unlightColorMap = new Map();
lightColors.forEach((lcolor, i) => {
  gColors.push("l(0) 0:" + lcolor + " 1:" + darkColors[i]);
  unlightColorMap.set(
    gColors[i],
    "l(0) 0:" + uLightColors[i] + " 1:" + uDarkColors[i]
  );
});

const layoutCfg = {
  type: "force",
  nodeSize: (d) => {
    return d.size / 2 + 5;
  },
  nodeStrength: 100,
  collideStrength: 0.8,
  alphaDecay: 0.01,
  preventOverlap: true,
};

var minimap = new G6.Minimap({
  size: [graphDiv.width() / 4, graphDiv.height() / 4],
});

//图实例
let graph = new G6.Graph({
  container: "topoGrapth",
  width,
  height,
  linkCenter: true,
  layout: layoutCfg,
  plugins: [minimap],
  //交互行为相关配置
  modes: {
    default: [
      "drag-canvas",
      "zoom-canvas",
      "drag-node",
      {
        type: "edge-tooltip",
        formatText: function formatText(model, e) {
          var edge = e.item;
          return (
            "来源：" +
            edge.getSource().getModel().label +
            "<br/>去向：" +
            edge.getTarget().getModel().label
          );
        },
      },
    ],
  },
  //level 0 图形的默认形状
  defaultNode: {
    type: "bubble",
    size: 20, //默认节点尺寸(改变根节点)
    labelCfg: {
      position: "center",
      style: {
        fill: "white",
        fontStyle: "bold",
      },
    },
  },
  defaultEdge: {
    color: "#888",
    // label: 'line',
    type: "animate-line", //'animate-line'
  },
});

graph.get("canvas").set("localRefresh", true);

const loadData = (data) => {
  const layoutController = graph.get("layoutController");
  //引力斥力大小
  layoutController.layoutCfg.nodeStrength = -200;
  //防止重叠的力强度
  layoutController.layoutCfg.collideStrength = 1;
  //迭代阈值的衰减率
  layoutController.layoutCfg.alphaDecay = 0.01;

  layoutController.layoutCfg.linkDistance = (d) => {
    //边长度
    return 100;
  };
  layoutController.layoutCfg.edgeStrength = () => {
    //边的作用力
    return 2;
  };

  nodes = data.nodes;
  edges = data.edges;

  showNodes = [];
  showEdges = [];
  nodeMap = new Map();
  edgesMap = new Map();

  nodes.forEach((node) => {
    // 根据不同的节点类型配置不同的图标
    // 根节点填充色
    // node.color = gColors[showNodes.length % gColors.length];
    node.text = nodeType[node.type] || nodeType["default"];
    node.type = "iconfont";
    node.collapse = false;
    node.style = {
      // fill: gColors[showNodes.length % gColors.length],
      fill: "#fff",
      // lineWidth: 0,
      fontSize: 20,
      cursor: "pointer",
    };
    // 节点文本配置
    // node.size = 200;
    node.labelCfg = {
      style: {
        fontSize: 5,
        fill: "#fff",
      },
    };
    // node.x = Math.round(Math.random() * 800);
    // node.y = Math.round(Math.random() * 800);
    showNodes.push(node);
    nodeMap.set(node.id, node);
  });

  //处理边
  edges.forEach((edge) => {
    edge.id = `${edge.source}-${edge.target}`;
    edge.style = {
      lineWidth: 0.8,
      opacity: 1,
      strokeOpacity: 1,
    };
    //边的文字样式
    edge.labelCfg = {
      style: {
        fill: "#000",
        fontSize: 4,
      },
    };
    edgesMap.set(edge.id, edge);
  });
  showEdges = edges;
  graph.data({
    nodes: showNodes,
    edges: showEdges,
  });
  graph.render();
};

loadData(testData);
export default {
  graph,
  width,
  height,
  nodes,
  edges,
  nodeMap,
  edgesMap,
  gColors,
  showNodes,
  showEdges,
};
